<template>
  <div>
    <van-cell-group>
      <van-cell title="地址" :value="address" />
      <van-cell title="联系电话" :value="phone" @click="callPhone(17767326328)" />
      <van-cell title="联系邮箱" :value="email" />
      <van-cell title="网址" :value="url" @click="gotoUrl(url)" />
    </van-cell-group>
    <div id="container"></div>
  </div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
  import request, {
    getUrl
  } from "../../utils/request2";
  import HomeSwipe from "./components/Swipe.vue" //导入组件
  //import HomeGrid from "./components/HomeGrid.vue"
  //import HomeGoods from "./components/HomeGoods.vue"
  export default {
    name: "map-view",
    data() {
      return {
        img: "@/assets/home/map.png",
        address: "浙江省宁波市镇海区毓秀路590号1-9",
        phone: "4000-666-577",
        email: "brand@gumingnc.com",
        url: "https://www.gumingnc.com/",
        lat: "",
        lng: "",
      }
    },
    mounted() {
      this.initMap();
    },
    methods: {
      callPhone(phone) {
        window.location.href = 'tel://' + phone;
      },
      gotoUrl(url) {
        window.open(url, "_blank");
      },
      async initMap() {
        try {
          await this.initLat();
          await this.initAMap();
        } catch (error) {
          console.error("Error initializing map:", error);
        }
      },
      async initLat() {
        try {
          const res = await request({
            url: "https://restapi.amap.com/v3/geocode/geo?parameters",
            method: "get",
            params: {
              address: this.address,
              key: "535a7e7dc990af4e942e66be7d8d01db"
            }
          });
          console.log(res);
          console.log(res.data.geocodes[0].location);
          const latlocation = String(res.data.geocodes[0].location).split(",");
          console.log(latlocation);
          this.lat = latlocation[0];
          this.lng = latlocation[1];
        } catch (error) {
          console.error("Error initializing latitude and longitude:", error);
          throw error; // Propagate the error to the caller
        }
      },
      async initAMap() {
        try {
          console.log("开始加载地图");
          window._AMapSecurityConfig = {
            securityJsCode: "c04672e122040170c352367d35c964a4",
          };
          const AMap = await AMapLoader.load({
            key: "c674da7db3391769157ddaf891e95288",
            version: "2.0",
            plugins: ["AMap.Scale"],
          });
          console.log(11);
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 16,
            center: [this.lat, this.lng],
          });
        } catch (error) {
          console.error("Error initializing AMap:", error);
          throw error; // Propagate the error to the caller
        }
      }

    }
  }
</script>

<style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 300px;
  }
</style>
